import React, { FC } from 'react'
import styled from "styled-components"
import Title from '@/components/pages/title'
import CrosswiseRate from '@/components/pages/crosswiseRate'
import FullCount from '@/components/pages/fullCount'
import {ICustomerProps} from '@/types/pages/customer/interface'

 

const SaleInfo = styled.div`
        flex: 1;
        display:flex;
        flex-direction: column;
        position: relative;
        align-content:center;
        justify-content: center;
        .title{
            flex: 1 1 25%;
        }
        .image{
            flex: 1 1 30%;
            padding:1rem; 
            display: flex;
            align-content:center;
            justify-content: center;
            img{
                margin-top:5rem;
                width: 14.4rem;
                height: 7.8rem;   
            }

        }
        .content{
            flex: 1 1 45%; 
            display: flex;
            flex-direction: column; 
            border:1px solid #0A4F89;
            background:rgba(6,31,79,.5); 
            margin:0 auto;
            width: 25.1rem;
            height: 11.7rem;
            .crosswise{
                border-top:1px solid #0A4F89;
            }
           
        }
`

const Content: FC<Partial< ICustomerProps>&{title:string}> = function (props) {

    return (
        <SaleInfo>
             <Title name={props.name!} /> 
            <div className='image'>
                <img src={props.img} />
            </div>
            <div className='content'>
                <FullCount num={props.num!} title={props.title} unit={props.unit!} />
                <div className='crosswise' />
              <CrosswiseRate comparisonText={props.comparisonText} upDownStatus={props.upDownStatus!} saleRate={props.saleRate!} /> 
                
            </div>
        </SaleInfo>
    )
}

export default Content
